<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左侧菜单栏测试 - 固定资产管理系统 5.0</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="static/css/admin_business.css">
    <style>
        /* 测试页面特定样式 */
        body {
            margin: 0;
            background: #f8fafc;
        }
        .test-content {
            padding: 30px;
            max-width: 800px;
            margin: 0 auto;
        }
        .test-card {
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .test-title {
            color: #1e3a8a;
            border-bottom: 2px solid #e2e8f0;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <!-- 左侧导航栏 -->
    <div id="nav-sidebar">
        <div class="nav-sidebar">
            <!-- 资产管理应用 -->
            <div>
                <h2>资产管理</h2>
                <ul>
                    <li>
                        <a href="#asset">资产管理</a>
                        <a href="#asset-add" class="addlink">添加</a>
                    </li>
                    <li>
                        <a href="#department">部门管理</a>
                        <a href="#department-add" class="addlink">添加</a>
                    </li>
                    <li>
                        <a href="#supplier">供应商管理</a>
                        <a href="#supplier-add" class="addlink">添加</a>
                    </li>
                    <li>
                        <a href="#position">位置管理</a>
                        <a href="#position-add" class="addlink">添加</a>
                    </li>
                    <li>
                        <a href="#contract">合同管理</a>
                        <a href="#contract-add" class="addlink">添加</a>
                    </li>
                    <li>
                        <a href="#workorder">工单管理</a>
                        <a href="#workorder-add" class="addlink">添加</a>
                    </li>
                    <li>
                        <a href="#maintenance">维护管理</a>
                        <a href="#maintenance-add" class="addlink">添加</a>
                    </li>
                    <li>
                        <a href="#borrow">借用管理</a>
                        <a href="#borrow-add" class="addlink">添加</a>
                    </li>
                </ul>
            </div>
            
            <!-- 用户管理应用 -->
            <div>
                <h2>用户管理</h2>
                <ul>
                    <li>
                        <a href="#user">用户</a>
                        <a href="#user-add" class="addlink">添加</a>
                    </li>
                    <li>
                        <a href="#group">组</a>
                        <a href="#group-add" class="addlink">添加</a>
                    </li>
                    <li>
                        <a href="#permission">权限管理</a>
                        <a href="#permission-add" class="addlink">添加</a>
                    </li>
                </ul>
            </div>
            
            <!-- 系统管理应用 -->
            <div>
                <h2>系统管理</h2>
                <ul>
                    <li>
                        <a href="#setting">系统设置</a>
                        <a href="#setting-add" class="addlink">添加</a>
                    </li>
                    <li>
                        <a href="#backup">数据备份</a>
                        <a href="#backup-add" class="addlink">添加</a>
                    </li>
                    <li>
                        <a href="#report">报表管理</a>
                        <a href="#report-add" class="addlink">添加</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main">
        <div class="test-content">
            <div class="test-card">
                <h1 class="test-title">🎯 左侧菜单栏优化效果预览</h1>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
                    <div>
                        <h3>✅ 完成的优化：</h3>
                        <ul style="line-height: 1.8;">
                            <li>🎨 现代化设计风格</li>
                            <li>📱 响应式移动端支持</li>
                            <li>🖼️ 为每个菜单项添加图标</li>
                            <li>🎪 优化悬停交互效果</li>
                            <li>🔄 平滑的动画过渡</li>
                            <li>📐 改进布局和间距</li>
                            <li>🎯 清晰的视觉层次</li>
                            <li>⚡ 流畅的用户体验</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3>🛠️ 技术特性：</h3>
                        <ul style="line-height: 1.8;">
                            <li>🏢 企业级商务配色</li>
                            <li>📊 模块化分组设计</li>
                            <li>🎛️ 智能添加按钮定位</li>
                            <li>🔍 优化的滚动条样式</li>
                            <li>📱 移动端抽屉式菜单</li>
                            <li>⌨️ 键盘导航友好</li>
                            <li>🎭 波纹点击效果</li>
                            <li>🌈 渐变背景支持</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="test-card">
                <h2 class="test-title">📋 菜单项图标说明</h2>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; font-size: 0.9rem;">
                    <div>💻 资产管理</div>
                    <div>🏢 部门管理</div>
                    <div>🏪 供应商管理</div>
                    <div>📍 位置管理</div>
                    <div>📄 合同管理</div>
                    <div>🛠️ 工单管理</div>
                    <div>🔧 维护管理</div>
                    <div>🤝 借用管理</div>
                    <div>👤 用户管理</div>
                    <div>👥 组管理</div>
                    <div>🔐 权限管理</div>
                    <div>⚙️ 系统设置</div>
                    <div>💾 数据备份</div>
                    <div>📊 报表管理</div>
                </div>
            </div>
            
            <div class="test-card">
                <h2 class="test-title">📱 移动端测试</h2>
                <p>请调整浏览器窗口宽度到768px以下，测试移动端菜单功能：</p>
                <ul>
                    <li>🔘 左上角会出现菜单切换按钮</li>
                    <li>📝 点击按钮显示/隐藏侧边栏</li>
                    <li>🌫️ 点击遮罩层关闭菜单</li>
                    <li>✨ 平滑的动画过渡效果</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        // 移动端菜单功能
        document.addEventListener('DOMContentLoaded', function() {
            initMobileMenu();
            
            // 监听窗口大小变化
            window.addEventListener('resize', function() {
                if (window.innerWidth <= 768) {
                    createMobileMenuButton();
                } else {
                    removeMobileMenuButton();
                }
            });
        });
        
        function initMobileMenu() {
            if (window.innerWidth <= 768) {
                createMobileMenuButton();
            }
        }
        
        function createMobileMenuButton() {
            if (document.querySelector('.mobile-menu-toggle')) return;
            
            const toggleBtn = document.createElement('button');
            toggleBtn.className = 'mobile-menu-toggle';
            toggleBtn.innerHTML = '<i class="fas fa-bars"></i>';
            toggleBtn.title = '菜单';
            
            const overlay = document.createElement('div');
            overlay.className = 'menu-overlay';
            
            document.body.appendChild(toggleBtn);
            document.body.appendChild(overlay);
            
            const sidebar = document.getElementById('nav-sidebar');
            
            toggleBtn.addEventListener('click', function() {
                sidebar.classList.toggle('show');
                overlay.classList.toggle('show');
                toggleBtn.innerHTML = sidebar.classList.contains('show') ? 
                    '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
            });
            
            overlay.addEventListener('click', function() {
                sidebar.classList.remove('show');
                overlay.classList.remove('show');
                toggleBtn.innerHTML = '<i class="fas fa-bars"></i>';
            });
        }
        
        function removeMobileMenuButton() {
            const toggleBtn = document.querySelector('.mobile-menu-toggle');
            const overlay = document.querySelector('.menu-overlay');
            const sidebar = document.getElementById('nav-sidebar');
            
            if (toggleBtn) toggleBtn.remove();
            if (overlay) overlay.remove();
            if (sidebar) sidebar.classList.remove('show');
        }
        
        // 模拟当前页面选中效果
        document.addEventListener('DOMContentLoaded', function() {
            // 随机选择一个菜单项作为当前页面
            const links = document.querySelectorAll('#nav-sidebar a:not(.addlink)');
            if (links.length > 0) {
                const randomLink = links[Math.floor(Math.random() * links.length)];
                randomLink.classList.add('current');
            }
        });
        
        console.log('🎯 左侧菜单栏测试页面已加载完成');
    </script>
</body>
</html>